<template>
  <div class="header">
    <div class="header-left">
    	<div class="iconfont back-icon">&#xe624;</div>
    </div>
    <div class="header-input">
    	<span class="iconfont">&#xe632;</span>
    	输入城市/景点/游玩内容
    </div>
    <router-link to="/city">
	    <div class="header-right">
	    	<!--{{this.city}}-->
	    	<!--{{this.$store.state.city}}-->
	    	{{this.city}}
	    	<span class="iconfont arror-icon">&#xe64a;</span>
	    </div>
    </router-link>
  </div>
</template>

<script>
	import { mapState } from 'vuex'
  export default {
    name: 'HomeHeader',
    computed: {
    	...mapState(['city'])
    }
//  props: {
//  	city: String
//  }
  }
</script>

<style lang="stylus" scoped>
	/*@import '../../../assets/styles/varibles.styl'*/
	/*代码优化方式一*/
	@import '~@/assets/styles/varibles.styl'
	/*代码优化方式二   在webpack.base.conf.js中  resolve对象下 alias{} 里 添加 
	 * 'styles': resolve('src/assets/styles'),*/
	/*@import '~styles/varibles.styl'*/
	.header 
		display: flex
		line-height: $headerHeight
		background: $bgColor
		color: #fff
		.header-left
			width: .64rem
			float: left
			.back-icon
				text-align: center
				font-size: .4rem
		.header-input
			flex: 1
			height: .64rem
			line-height: .64rem
			background: #fff
			border-radius: .1rem
			padding-left: .2rem
			margin-top: .12rem
			margin-left:.2rem
			color: #ccc
		.header-right
			min-width: 1.04rem
			padding: 0 .1rem
			float: right
			text-align: center
			color: #fff
			.arror-icon
				margin-left: -.04rem
				font-size: .24rem
</style>
